<template>
  <div class="add-edit-dialog">
    <el-dialog
      :title="title"
      :visible.sync="isShowDialogComponent"
      width="50%"
      :before-close="handleClose">
      <el-form
        ref="formRef"
        :model="form"
        label-width="120px"
        :rules="formRules"
        v-loading="loading"
        element-loading-text="拼命加载中......"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0,0)">
        <el-form-item label="角色名称" prop="RoleName">
          <el-input v-model="form.RoleName" :maxLength="20"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="Describe">
          <el-input v-model="form.Describe" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose" :disabled="loading">取 消</el-button>
    <el-button type="primary" @click="submitEvent" :disabled="loading">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
//角色接口的类
import RoleManage from '../../../model/roleManage'
//验证规则
import ProofRules from '../../../ck/util/proofRules'

export default {
  name: 'AddAndEditDialog',
  props: {
    title: String,
    isShowDialogComponent: Boolean,
    judgeId: Number
  },
  data () {
    return {
      loading: false,
      form: {
        RoleName: '',
        Describe: '',
        ID: 0
      },
      formRules: {
        RoleName: ProofRules.requiredFieldAndLength('角色名称', 2, 20),
        Describe: ProofRules.requiredFieldAndLength('角色描述', 2, 200)
      },
    }
  },
  created () {
    this.judgeEditButton()
  },
  methods: {
    handleClose (payload) {
      this.$emit('handleClose', payload)
    },
    submitEvent () {
      this.$refs.formRef.validate(async valid => {
        if (!valid) {
          this.isShowDialogComponent = true
          return this.$message.error('请填写表单必填项')
        } else {
          try {
            if (this.judgeId === 0) {
              this.loading = true
              await RoleManage.addRoles(this.form)
              this.loading = false
              this.$message.success('成功添加新角色')
              this.$emit('handleClose', 'submitButton')
            } else {
              this.loading = true
              await RoleManage.editRoleInfo(this.form)
              this.loading = false
              this.$message.success('编辑角色信息成功')
              this.$emit('handleClose', 'submitButton')
            }
          } catch (err) {
            this.loading = false
          }
        }
      })
    },
    async judgeEditButton () {
      if (this.judgeId !== 0) {
        try {
          this.form.ID = this.judgeId
          const res = await RoleManage.showRoleInfo(this.judgeId)
          this.form.RoleName = res.RoleName
          this.form.Describe = res.Describe
        } catch (err) {
          console.log(err)
        }
      }
    }

  }
}
</script>

<style scoped>
/deep/ .el-input__inner {
  width: 90%;
}

/deep/ .el-textarea__inner {
  width: 90%;
}
</style>

